<template>
  <div class="LoginrRegisterResetBg">
    <div class="titleBg">
      <div class="titleBox">
        <img :src="require('@/assets/images/headLogo.png')" />
        <div class="title">程 / 序 / 员 / 的 / 梦 / 工 / 厂</div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="stylus">
.LoginrRegisterResetBg {
  // width: 100vw;
  height: 800px;
  // height: calc(100vh - 60px - 14px); 屏幕太小无法正常显示
  background: #f5f5f5;

  .titleBg {
    padding-top: 87px;
    width: 100%;
    height: 400px;
    background-color: #0e79c0;

    .titleBox {
      margin: 0 auto 45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 464px;
      height: 60px;

      img {
        object-fit: cover;
        max-height: 60px;
      }

      .title {
        font-family: Segoe UI;
        font-weight: bold;
        font-size: 18px;
        color: #ffffff;
      }
    }
  }

  .titleBg::after {
    content: '';
    clear: both;
  }
}
</style>